<template>
	<view class="content">
		<view class="headView"></view>
		<view class="detail_container content">
			<view style="width: 100%;">
				<view class="scoreDesView content" :style="{background: composite_Data.scoreColor}">
					{{composite_Data.describe}}
				</view>
			</view>
			<view class="paraNameView">
				<text>{{composite_Data.name}}</text>
				<text></text>
				<!-- <text>检测日期: {{report.createTime}}</text> -->
			</view>
			<!-- 名词解释 -->
			<view class="paraNameDes content">
				<text>{{nounsExplanation}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page_Type: 0, //当前页面代表的参数项  0: 血管弹性 1:调节能力 2: 波动指数 3: 心率 4: 血管年龄
				userBaseInfo: {}, //用户基本信息
				report: null,
				dailyManage: '',
				nounsExplanation: '',
				composite_Data: {
					scoreColor: '',
					describe: '',
					name: ''
				}
			};
		},
		onLoad(option) {
			console.log('option>>', option);
			this.page_Type = option.index;
			let jumpContent = JSON.parse(option.jumpContent);
			this.nounsExplanation = this.$config.NounsExplanation[option.index]
			this.composite_Data.describe = jumpContent.des
			this.composite_Data.scoreColor = jumpContent.color
			switch (option.index) {
				case '0':
					this.setNavigationBarTitle('血管弹性');
					this.composite_Data.name = '弹性指数';
					break;
				case '1':
					this.setNavigationBarTitle('调节能力');
					this.composite_Data.name = '调节指数';
					break;
				case '2':
					this.setNavigationBarTitle('血流波动');
					this.composite_Data.name = '波动指数';
					break;
				case '3':
					this.setNavigationBarTitle('心率数据');
					this.composite_Data.name = '心率指数';
					break;
				case '4':
					this.setNavigationBarTitle('血管年龄')
					this.composite_Data.name = '血管年龄'
					break;
			}
		},
		methods: {
			setNavigationBarTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.headView {
		width: 750rpx;
		height: 200rpx;
		background-color: #35bfaf;
	}

	.detail_container {
		margin-top: -100rpx;
		z-index: 99;
		width: 700rpx;
		background-color: white;
		border-radius: 15rpx;
	}

	.scoreDesView {
		margin: -73rpx 73rpx 30rpx;
		width: 150rpx;
		height: 150rpx;
		border: 3px solid #FFFFFF;
		border-radius: 50%;
		font-size: 45rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.paraNameView {
		width: 600rpx;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
	}

	.paraNameView text:nth-child(1) {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}

	.paraNameView text:nth-child(2) {
		margin-left: 35rpx;
		font-size: 25rpx;
		color: #96A3B4;
	}

	.paraNameDes {
		margin: 48rpx 0 26rpx;
		width: 600rpx;
	}

	.paraNameDes text {
		text-indent: 2em;
	}
</style>